<template>
  <div style="overflow: hidden;width: 100%;height: 100%" class="flex column">
    <CustomizeScrollbar>
      <template>
        <div  class="scrollbar-item" v-for="item in list" :key="item">
          <span>{{ item }}</span>
          <span>{{ item }}</span>
          <span>{{ item }}</span>
          <span>{{ item }}</span>
        </div>
      </template>
    </CustomizeScrollbar>
  </div>
</template>

<script>
import CustomizeScrollbar from "@/views/reports/components/customize-scrollbar.vue";

export default {
  name: "list-one.vue",
  props: ['list'],
  components: {
    CustomizeScrollbar
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";



.scrollbar-item {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  font-size: px2vw(14);
  padding: px2vh(10) px2vh(30);
  justify-content: space-between;
  @include flex;


  span{
    flex: 1;
    text-align: center;
  }

  &:nth-of-type(2n) {
    background: rgba(102, 102, 102, .3);
  }

  &:nth-of-type(2n + 1) {
    background: rgba(102, 102, 102, .1);
  }
}

</style>
